<!--
 * @Author: your name
 * @Date: 2021-04-08 14:02:26
 * @LastEditTime: 2021-05-19 00:07:33
 * @LastEditors: Please set LastEditors
 * @Description: 条形图1
 * @FilePath: /medicine-web/src/components/Charts/BarChart.vue
-->
<template>
  <div class="bar-chart-container">
    <div :id="elementId" style="height: 360px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'barChart',
  data () {
    return {}
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      var myChart = echarts.init(document.getElementById(this.elementId))
      myChart.setOption({
        title: {
          text: this.chartTitle,
          textStyle: {
            color: '#555555',
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        grid: {
          left: '-5%',
          right: '5%',
          bottom: '30px',
          containLabel: true
        },
        legend: {
          show: false
        },
        graphic: {
          elements: [
            {
              type: 'text',
              right: '40px',
              top: '5px',
              style: {
                fill: '#555555',
                text: '单位__条',
                font: '0.875em "Microsoft YaHei", sans-serif',
                textAlign: 'center'
              }
            }
          ]
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#D8D8D8'
            }
          },
        },
        yAxis: {
          type: 'category',
          data: this.getYAxis(),
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          offset: 0,
          axisLabel: {
            show: true,
            verticalAlign: 'bottom',
            align: 'left',
            lineHeight: 56,
            formatter: (format) => {
              if (format === this.chartData[3].name) {
                return [
                  '{icon1|' + '}' + '{textFormat|' + format + '}',
                ]
              } else if (format === this.chartData[2].name) {
                return [
                  '{icon2|' + '}' + '{textFormat|' + format + '}',
                ]
              } else if (format === this.chartData[1].name) {
                return [
                  '{icon3|' + '}' + '{textFormat|' + format + '}',
                ]
              } else if (format === this.chartData[0].name) {
                return [
                  '{icon4|' + '}' + '{textFormat|' + format + '}',
                ]
              } else {
                return [
                  '{icon1|' + '}' + '{textFormat|' + format + '}',
                ]
              }
              
            },
            rich: {
              'textFormat': {
                padding: [0, 0, 0, 10]
              },
              'icon1': {
                backgroundColor: '#FFFFFF',
                borderRadius: 8,
                borderWidth: 2,
                borderColor: '#64A1FD',
                width: 8,
                height: 8
              },
              'icon2': {
                backgroundColor: '#FFFFFF',
                borderRadius: 8,
                borderWidth: 2,
                borderColor: '#FCEFC9',
                width: 8,
                height: 8
              },
              'icon3': {
                backgroundColor: '#FFFFFF',
                borderRadius: 8,
                borderWidth: 2,
                borderColor: '#F6B9BC',
                width: 8,
                height: 8
              },
              'icon4': {
                backgroundColor: '#FFFFFF',
                borderRadius: 8,
                borderWidth: 2,
                borderColor: '#C1EBF3',
                width: 8,
                height: 8
              },
            }
          }
        },
        series: {
          type: 'bar',
          barWidth: 12,
          z: 3,
          label: {
            show: true,
            offset: [388, -28],
            align: 'right',
            position: 'left',
            // verticalAlign: 'bottom',
            // align: 'left',
            // lineHeight: 56,
            formatter: (format) => {
              if (format === this.chartData[3].name) {
                return [
                  '{textFormat|' + format.data + '}',
                ]
              } else if (format === this.chartData[2].name) {
                return [
                  '{textFormat|' + format.data + '}',
                ]
              } else if (format === this.chartData[1].name) {
                return [
                  '{textFormat|' + format.data + '}',
                ]
              } else if (format === this.chartData[0].name) {
                return [
                  '{textFormat|' + format.data + '}',
                ]
              } else {
                return [
                  '{textFormat|' + format.data + '}',
                ]
              }
            },
            rich: {
              'textFormat': {
                padding: [0, 0, 0, 0]
              },
            }
          },
          data: this.getData(),
          showBackground: true,
          backgroundStyle: {
            borderRadius: 5
          },
          itemStyle: {
            borderRadius: 5,
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 5,
            color: (param)  => {
              let color = new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [
                  { offset: 0, color: '#76C3FE' },
                  { offset: 1, color: '#64A1FD' },
                ]
              )
              switch (param.name) {
                case this.chartData[3].name:
                  color = new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      { offset: 0, color: '#76C3FE' },
                      { offset: 1, color: '#64A1FD' },
                    ]
                  )
                  break;
                case this.chartData[2].name:
                  color = new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      { offset: 0, color: '#FCEECB' },
                      { offset: 1, color: '#FCEFC9' },
                    ]
                  )
                  break;
                case this.chartData[1].name:
                  color = new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      { offset: 0, color: '#F6B9BC' },
                      { offset: 1, color: '#F6B9BC' },
                    ]
                  )
                  break;
                case this.chartData[0].name:
                  color = new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      { offset: 0, color: '#C8F7F1' },
                      { offset: 1, color: '#C1EBF3' },
                    ]
                  )
                  break;
                default:
                  break;
              }
              return color
            }
          }
        }
      })
    },
    getYAxis() {
      return this.chartData.map(item => item.name)
    },
    getData () {
      return this.chartData.map(item => item.data)
    }
  },
  watch: {
    chartData (val, old) {
      this.initChart()
    }
  },
  props: {
    elementId: {
      type: String,
      default: ''
    },
    chartTitle: {
      type: String,
      default: ''
    },
    chartData: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang="scss" scoped>
.bar-chart-container {
  box-shadow: 5px 5px 6px #ccc;
  border-radius: 5px;
}
</style>